import Taro, { Component } from "@tarojs/taro";
import { View, ScrollView, Input, Text, Image } from "@tarojs/components";
import { decodeQuery } from "../../lib/url";
import './LoupanNum.scss';
import '../tabBar/index/index.scss'

export default class LoupanNum extends Component {
    constructor() {
        super(...arguments)
        this.state = {
            tes: true,
            list: [],
            tylist: [{
                title: '一圈层',
                tilist: [
                    { feli: '全选' },
                    { feli: '锦江区' },
                    { feli: '江汉区' },
                    { feli: '余杭区' },
                    { feli: '绵阳区' }
                ]
            }, {
                title: '二圈层',
                tilist: [
                    { feli: '全选' },
                    { feli: '绵阳区' },
                    { feli: '东湖区' },
                    { feli: '江岸区' },
                    { feli: '武昌区' },
                    { feli: '洪山区' },
                    { feli: '西湖区' },
                ]
            }, {
                title: '三圈层',
                tilist: [
                    { feli: '全选' },
                    { feli: '锦江区' },
                    { feli: '江汉区' },
                    { feli: '余杭区' },
                    { feli: '绵阳区' },
                    { feli: '东湖区' },
                    { feli: '江岸区' },
                    { feli: '武昌区' },
                    { feli: '洪山区' },
                    { feli: '西湖区' },
                ]
            }]

        }
    }

    componentWillMount() {
        console.log(this.state.tes);
        let item = decodeQuery(this.$router.params).item
        console.log(item.title)
        Taro.setNavigationBarTitle({
            title: item.title
        })
    }
    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    onClickSX() {
        if (this.state.tes) {
            console.log('-----' + this.state.tes)
            this.setState({
                tes: false
            })
        } else {
            console.log('=====' + this.state.tes)
            this.setState({
                tes: true
            })
        }
    }

    //选择事件
    checkTime(e) {
        console.log(e.target.id)
        // let arr = e.target.id.split("-")
        if (this.state.list.length == 0) {
            if (e.target.id.split("-")[1] === '0') {
                let ins = parseInt(e.target.id.split("-")[0]);
                for (let i = 0; i < this.state.tylist[ins].tilist.length; i++) {
                    this.state.list.push(e.target.id.split("-")[0] + '-' + i)
                }
            } else {
                this.state.list.push(e.target.id)
            }
        } else {
            if (this.state.list.indexOf(e.target.id) > -1) {
                if (e.target.id.split("-")[1] === '0') {
                    let ins = parseInt(e.target.id.split("-")[0]);
                    for (let i = 0; i < this.state.tylist[ins].tilist.length; i++) {
                        var index = this.state.list.indexOf(e.target.id.split("-")[0] + '-' + i)
                        if (index > -1) {
                            this.state.list.splice(index, 1)
                        }
                    }
                } else {
                    var index = this.state.list.indexOf(e.target.id)
                    let j = 0;
                    for (let i = 0; i < this.state.list.length; i++) {
                        if (this.state.list[i].split('-')[0] == e.target.id.split("-")[0]) {
                            j++
                        }
                    }
                    this.state.list.splice(index, 1)
                    let ins = parseInt(e.target.id.split("-")[0]);
                    if (j <= this.state.tylist[ins].tilist.length && this.state.list.indexOf(e.target.id.split("-")[0] + '-0') > -1) {
                        this.state.list.splice(this.state.list.indexOf(e.target.id.split("-")[0] + '-0'), 1)
                    }

                }

            } else {
                if (e.target.id.split("-")[1] === '0') {
                    let ins = parseInt(e.target.id.split("-")[0]);
                    for (let i = 0; i < this.state.tylist[ins].tilist.length; i++) {
                        var index = this.state.list.indexOf(e.target.id.split("-")[0] + '-' + i)
                        if (!(index > -1)) {
                            this.state.list.push(e.target.id.split("-")[0] + '-' + i)
                        }

                    }
                } else {
                    this.state.list.push(e.target.id)
                    let j = 0;
                    let ins = parseInt(e.target.id.split("-")[0]);
                    for (let i = 0; i < this.state.list.length; i++) {
                        if (this.state.list[i].split('-')[0] == e.target.id.split("-")[0]) {
                            j++
                        }
                    }
                    if (j == this.state.tylist[ins].tilist.length - 1 && !(this.state.list.indexOf(e.target.id.split("-")[0] + '-0') > -1)) {
                        this.state.list.push(e.target.id.split("-")[0] + '-0')
                    }

                }
            }
        }
        this.setState({
            list: this.state.list
        })
        console.log(this.state.list.length + "----")

    }

    //重置按钮
    onCHZ() {
        if (this.state.list.length > 0) {
            this.state.list.length = 0;
            this.setState({
                list: this.state.list
            })
        }
    }
    //确定按钮
    onQD() {
        this.setState({
            tes: true
        })

        if (this.state.list.length == 0) {
            console.log('并没有选择')
        } else {
            for (let i = 0; i < this.state.list.length; i++) {
                console.log(this.state.tylist[this.state.list[i].split("-")[0]].tilist[this.state.list[i].split("-")[1]].feli + "-------" + this.state.list[i])
            }
        }


    }
    render() {

        const xlpList = [
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            },
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            },
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            },
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            },
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            },
            {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            }, {
                img: "../../images/lp.jpg",
                num: "8w",
                name: "翡翠华庭",
                addr: "大邑县",
                picer: "0.7-1.81万元/m²",
                ztList: [
                    "正在登记",
                    "正在报名",
                    "已摇号"
                ],
                time: "2019-03-21",
                ytnum: "8.1w"
            }
        ];


        const { tes, list, tylist } = this.state
        return (
            <View style='width:100%;height:100%;'>
                <View style='position: fixed;z-index:9999;width:100%;background-color:white;'>
                    <View className='view-inp'>
                        <View className='view-i'>
                            <Image className='img-top' src={require('../../images/sousuo.png')} />
                            <Input type='text' className='inp' placeholder='搜索：碧桂园' />
                            <Image className='img-top' hidden={true} src={require('../../images/xx.png')} />
                        </View>
                        <Text className='text-qd' >确定</Text>
                    </View>
                    <View className='view-tj'>
                        <Text className='txt-sx' style={list.length > 0 ? 'color:#3E96F1' : 'color:#8D8D8D'} onClick={this.onClickSX}>区域筛选</Text>
                        <Image className='img-top' src={list.length > 0 ? require('../../images/xsj_h.png') : require('../../images/xsj.png')} />
                    </View>
                    <View className='view-line'></View>
                </View>


                <View style={tes ? 'position:absolute;width:100%;height:100%;' : 'position:absolute;width:100%;height:100%;overflow:hidden;'}>
                    <View className='flo' hidden={tes}>
                        <ScrollView scrollY style='height:300px;'>
                            <View className='view-flo-all'>
                                {tylist.map((item, index) => (
                                    <View style='width:100%;display:flex;flex-direction:column;' key={index}>
                                        <Text className='tvt-sty'>{item.title}</Text>
                                        <View className='vie-tv-item'>
                                            {item.tilist.map((items, indes) => (
                                                <Text id={index + "-" + indes} className={list.length > 0 ? list.indexOf(index + '-' + indes) > -1 ? 'tvt-itmes' : 'tvtitme' : 'tvtitme'} onClick={this.checkTime.bind(this)} key={indes}>{items.feli}</Text>
                                            ))}
                                        </View>
                                    </View>
                                ))}
                            </View>
                        </ScrollView>
                        <View className='bott-vie'>
                            <View className='view-cz' onClick={this.onCHZ}>重置</View>
                            <View className='view-qd' onClick={this.onQD}>确定</View>
                        </View>
                    </View>
                    <ScrollView style='position: absolute;top:80px;left:0px;' scrollY>
                        <View className='view-zx'>
                            {xlpList.map((item, index) => (
                                <View className='view-zxkp' key={index}>
                                    <View className='view-zy-itme'>
                                        <View className='view-itme-im'>
                                            <Image className='view-item-im-img' src={item.img}></Image>
                                            <View className='view-item-im-view'>
                                                <Image className='view-item-im-view-img' src='../../images/yuedu.png'></Image>
                                                <View className='view-item-im-view-tx'>{item.num}</View>
                                            </View>
                                        </View>
                                        <View className='view-zy-vie'>
                                            <View className='view-zy-name'>{item.name}</View>
                                            <View className='view-zy-viel'>
                                                <View className='view-zy-viel-tx'>{item.addr}</View>
                                                <View className='view-zy-viel-tx' style='margin-left:5px'>报名结束时间:{item.time}</View>
                                            </View>
                                            <View className='view-zy-viel'>
                                                <View className='view-zy-viel-tx' style='color:red'>{item.picer}</View>
                                            </View>

                                            <View className='view-zy-viel'>
                                                <View className='view-zy-view-zt'>
                                                    {item.ztList.map((items, indexs) => (
                                                        <View className={indexs === 0 ? 'view-zy-view-zt_tx' : '' || indexs === 1 ? 'view-zy-view-zt_tx1' : '' || indexs === 2 ? 'view-zy-view-zt_tx2' : ''} key={indexs}>{items}</View>
                                                    ))}
                                                </View>
                                                <View className='view-zy-view-view'>
                                                    <Image className='view-item-im-view-img' src='../../images/liuyan.png'></Image>
                                                    <View className='view-zy-view-view-tx'>{item.ytnum}</View>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                    {(index < xlpList.length - 1) ? <View style='width:100%;height:1px;background:#F5F5F5;margin-top:5px;'></View> : ''}
                                </View>
                            ))}

                        </View>

                    </ScrollView>



                </View>

            </View>

        )
    }

}